<template>
  <div class="BasicsVue">
  <h1 v-text="title"></h1>
  <input v-model="newItem" v-on:keyup.enter="addNew">
  <ul>
    <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinished(item)">
    {{item.label}}
    </li>
  </ul>
</template>

<script>
import Store from './store'

export default {
  data () {
    return {
      title:'this is a todo list',
      items:Store.fetch(),
       newItem:''
    }
  },
  watch:{
    items:{
      handler:function(items){
        Store.save(items)
      },
      deep:true
    }
  },
  methods:{
    toggleFinished:function(item){
      item.isFinished = !item.isFinished
    },
    addNew:function(){
      this.items.push({
        label:this.newItem,
        isFinished:false
      })
      this.newItem = ''

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.finished{
  text-decoration:underline;
}
h1, h2 {
  font-weight: normal;
}

a {
  color: #42b983;
}
</style>
